<!doctype html>
<html lang="en">
  <head>
    <title>Title</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    
    <!-- Bootstrap CSS v5.2.0-beta1 -->
    <link rel="stylesheet" href="./layui/css/layui.css">
    <link rel="stylesheet" href="./assets/css/swiper-bundle.min.css" />


  </head>
  <body  style="margin: 10px;background-color: #f6f6f6;">
    <div class="layui-tab layui-tab-card ">
        <ul class="layui-tab-title">
          <li class="layui-this">网站设置</li>
          <li>用户管理</li>
          <li>权限分配</li>
          <li>商品管理</li>
          <li>订单管理</li>
        </ul>
        <div class="layui-tab-content" style="height: 100px;">
          <div class="layui-tab-item layui-show">默认宽度是相对于父元素100%适应的，你也可以固定宽度。</div>
          <div class="layui-tab-item">2</div>
          <div class="layui-tab-item">3</div>
          <div class="layui-tab-item">4</div>
          <div class="layui-tab-item">5</div>
          <div class="layui-tab-item">6</div>
        </div>
      </div>
      <div class="layui-card">
        <div class="layui-card-header">卡片面板</div>
        <div class="layui-card-body">
          卡片式面板面板通常用于非白色背景色的主体内<br>
          从而映衬出边框投影
        </div>
      </div>
    <!-- Bootstrap JavaScript Libraries -->
    <script src="./layui/layui.js"></script>
    <script src="./assets/js/swiper-bundle.min.js"></script>
    <script src="./assets/js/swiper-start.js"></script>
  </body>
</html>